Canvas Plugin

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Additionally, Inline JavaScript plugin (InlineJS) is required to embed the JavaScript in the DW page.

To prepare a canvas element with given size and id, this plugin uses <canvas> for markup that is almost same as the “HTML5 Canvas” tag. A difference is that you can provide your own JavaScript to render graphics in the canvas inside the “canvas” section.

For example, you can draw two boxes in the canvas of which size is 140×140 pixcels:

<canvas sample1 140,140>
//onload = function() { draw1(); }; // !! use jQuery instead of "onload"
jQuery( function() { draw1(); });

function draw1() {
  var canvas1 = jQuery('#sample1')[0];
  if ( !canvas1 || !canvas1.getContext ) return false;
  var ctx1 = canvas1.getContext('2d');
  ctx1.fillStyle = "rgb(200,0,0)";
  ctx1.fillRect (10, 10, 55, 50);
  ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx1.fillRect (30, 30, 55, 50);
}
</canvas>

Then you will get a drawing in your DW page. The snippet of HTML is:

<canvas class="canvasbox" id="sample1" width="140" height="140">[No canvas support]</canvas>
<script type="text/javascript">
/*<![CDATA[*/
jQuery( function() { draw1(); });
function draw1() {
  var canvas1 = jQuery('#sample1')[0];
  if ( !canvas1 || !canvas1.getContext ) return false;
  var ctx1 = canvas1.getContext('2d');
  ctx1.fillStyle = "rgb(200,0,0)";
  ctx1.fillRect (10, 10, 80, 80);
  ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx1.fillRect (60, 60, 130, 130);
}
/*!]]>*/
</script>

Basic syntax:

<canvas id [size]> [script] </canvas>

• id : “id” of the canvas, which must be unique in the same DW page.
  • This “id” is used in the script to identify canvas or chart target.

• size : Size of the canvas. (Optional)
  • Default value is 300px,150px, which means 300px width and 150px height.
  • When one value is given it is assumed to be the height.

• script : JavaScript to draw something in the canvas. (Optional)
  • script is embedded in the HTML of the page.
  • In case of no script inside the tag, no script may embedded.

Syntax Variants:

You may draw more complex charts in the canvas using any javascript chart software, such as RGraph and jqPlot. These software require different HTML for chart target; “HTML5 canvas” and “div” section, respectively. This plugin is designed to prepare appropriate target for different chart software. Currently, this plugin supports only two software mentioned above. Additionally, each canvas variant prepares small license note underneath of the chart canvas.

<canvas:rgraph canvas_id [size]> [script] </canvas>

• indicate to prepare chart target for RGraph. Please see also it's license information.
• HTML output example:
  

  <canvas class="canvasbox" id="chart1" width="300px" height="300px"></canvas>
  <div class="rgraph-license-note" style="width:300px;">
  <a href="http://www.rgraph.net/">Powered by RGraph</a>
  </div>

<canvas:jqplot canvas_id [size]> [script] </canvas>

• indicate to prepare chart target for jqPlot. Please refer also jQplot project page.
• HTML output example:
  

  <div class="jqplot-target" id="chart1" style="width:300px; height:300px;"></div>
  <div class="jqplot-license-note" style="width:300px;">
  <a href="http://www.jqplot.com/">Powered by jQplot</a>
  </div>

There are no configuration options for this plugin.

This plugin is developed to learn how to incorporate various charts into the DW page and to setup working playground for trials. Therefore, it is rather experimental, especially for syntax variants.

• improve match pattern with word boundary (2016-07-14 02:46)
• inherited handle() and render() args (2014-08-05 16:59)
• Merge pull request #1 from ssahara/syntax-components (2014-02-13 16:44)
• Release 2014-02-14 (2014-02-13 16:41)
• update readme (2014-02-13 13:41)

[discussions should ideally be deleted and turned into FAQ entries along the way]

Representing data with the help of charts,graphs,symbols is one of the effective way. With the help of such data visualization items we are able to make data more interactive.

Thanks